<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
</head>
<body>
    <form action="#">
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username">
            <span id="usernameInfo"></span>
        </div>
        <div>
            <label for="pwd">密码：</label>
            <input type="password" id="pwd">
            <span id="pwdInfo"></span>
        </div>
        <div>
            <label for="confirm">确认密码：</label>
            <input type="password" id="confirm">
            <span id="confirmInfo"></span>
        </div>
        <div>
            <input type="submit">
        </div>
    </form>
    <script>
        let username = document.getElementById("username");
        let usernameInfo = document.getElementById("usernameInfo");
        let pwd = document.getElementById("pwd");
        let pwdInfo = document.getElementById("pwdInfo");
        let confirm = document.getElementById("confirm");
        let confirmInfo = document.getElementById("confirmInfo");
        username.onblur = function(){
            if(/^\w{5,20}$/.test(this.value)){
                usernameInfo.innerHTML = "√";
            }else{
                usernameInfo.innerHTML = "用户名不符合规范";
            }
        }
        pwd.onblur = function(){
            if(/^.{6,}$/.test(this.value)){
                pwdInfo.innerHTML = "√";
            }else{
                pwdInfo.innerHTML = "密码不符合规范";
            }
        }
        confirm.onblur = function(){
            if(this.value == pwd.value){
                confirmInfo.innerHTML = "√";
            }else{
                confirmInfo.innerHTML = "两次密码不一致";
            }
        }
        document.forms[0].onsubmit = function(event){
            if(usernameInfo.innerHTML == "√"
                && pwdInfo.innerHTML == "√"
                && confirmInfo.innerHTML == "√"){
                    alert("OK");
            }else{
                alert("验证失败");
                event.preventDefault();
            }
        }

        let obj = {
            name : "张三",
            show:() => {
                console.log("name:",this);
            }
        }
        obj.show();
        let func = obj.show;
        func();

        // this指向说明
        // 1. 在普通函数中，this指向window对象
        // 2. 在对象的方法中，并且是通过对象来调用此方法，this指向当前对象
        // 3. 箭头函数中的this是没有自己的指向范围的，它会和它外部作用域指向同一个对象
        // 4. 在事件的回调函数中，this指向当前事件源对象
    </script>
</body>
</html>